// 读取state数据
<template>
  <div id="app">
    <my-header>{{ headerTitle }}</my-header>
    <search-input
      :placeholder="placeholder"
      :maxlength="maxlength"
    ></search-input>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
    <tab></tab>
  </div>
</template>

<script>
import MyHeader from "./components/Header/index.vue";
import Tab from "./components/Tab/index.vue";
import SearchInput from "./components/SearchInput/index.vue";

import { useStore } from "vuex";
import { computed, watch } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "App",
  components: {
    MyHeader,
    SearchInput,
    Tab,
  },
  setup() {
    const store = useStore(),
      state = store.state,
      router = useRouter();

    //刷新页面时重定向到根目录/
    router.push("/");

    //通过watch Componsition API监听路由切换
    //watch(需要监听的数据,数据变化时处理函数)
    watch(
      () => {
        //获取路由名称
        // console.log(router.currentRoute.value.name);
        //day/month/year
        return router.currentRoute.value.name;
      },
      (value) => {
        //这里的value是上面第一个函数里return的值
        // console.log(value);
        // day/month/year

        //调用mutatios里面的方法传入路由名称
        store.commit("setHeaderTitle", value);

        //路由变化时改变格式内容
        store.commit("setPlaceholder", value);
        store.commit("setMaxlength", value);
        store.commit("setField", value);
        store.commit("setErrorCode", 0);
      }
    );

    //静态属性只读不写：computed(() => state)
    //加value可以取出数据
    //相当于一个对象{}
    /**
     * console.log(computed(() => state).value);
     * {
     *   headerTitle: "当天信息",
     *   placeholder: "请输入",
     *   maxlength: 8,
     *   dayData: {},
     *   monthData: [],
     *   yearData: [],
     *   error_code: 0,
     *   errorCode: 10001
     * }
     */

    //实际上返回的是state里面的对象
    return computed(() => state).value;
  },
};
</script>

<style lang="scss">
</style>
